import React, { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      show: 3,
      list: ["zhangsan", "lisi", "wangwu"],
      content: "<h1>标题</h1>",
    };
  }

  fn() {
    this.setState((prevState) => {
      return {
        // list: prevState.list.push("zhaoliu"),  ❌
        list: [...prevState.list, "zhaoliu"],
        // list: prevState.list.concat("zhaoliu"),
      };
    });
  }

  render() {
    return (
      <>
        <h3>数据渲染</h3>
        {this.state.show ? <p>11111</p> : <p>22222</p>}
        <ul>
          {this.state.list.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <button onClick={this.fn.bind(this)}>btn</button>
        {/* 渲染html标签 */}
        <div dangerouslySetInnerHTML={{ __html: this.state.content }}></div>
      </>
    );
  }
}

export default App;
